<template>
  <div class="dashboard-container">
    <ul>
      <li>
        <router-link to="/home">
          <div class="core-item">
            <img src="~@/assets/dashboard/health_records.png" alt="">
            <h6>首页</h6>
          </div>
        </router-link>
      </li>
      <li>
        <div class="core-item disabled">
          <img src="~@/assets/dashboard/get_medical_attention.png" alt="">
          <h6>消息</h6>
        </div>
      </li>
      <li>
        <div class="core-item disabled">
          <img src="~@/assets/dashboard/get_medical_attention.png" alt="">
          <h6>我的医生</h6>
        </div>
      </li>
      <li>
        <router-link to="/personalCenter">
          <div class="core-item">
            <img src="~@/assets/dashboard/internet_hospital.png" alt="">
            <h6>个人中心</h6>
          </div>
        </router-link>
      </li>
      <li style="height: 0;" />
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center ;
  min-height: calc(100vh - 50px);
  background: #DCF6F9;
  ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width:600px;
  }
  li {
    padding:0 35px;
    width: 290px;
    height: 270px;
    margin-bottom:40px;
    .core-item{
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      width: 230px;
      height: 100%;
      background: #fff;
      box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.16);
      border-radius: 12px;
      cursor: pointer;
    }
    .core-item.disabled{
      cursor: not-allowed ;
    }
    img{
      width: 100px;
      height: 100px;
      margin-bottom: 30px;
    }
    h6{
      margin-bottom: 54px;
      font-size: 22px;
      font-weight: bold;
      color: #2C3236;
    }
  }
}
</style>

